<template>
	<div class="home">
		<div class="wrap-full">
			<!-- 版纳图 -->
			<div class="page-top-img">
				<img src="../assets/img/2018050411474867252.jpg" class="show-other" alt="" title="">
			</div>
			<!-- 住宿标题 -->
			<div class="wrap">

				<div class="title-block">
					<div>住宿</div>
				</div>

				<ul class="page-nav">
					<li><a href="/">首页 &gt;</a></li>
					<li><a href="/web/vacation/holidaylist">度假乌镇 &gt;</a></li>
					<li class="active"><a href="#">住宿 &gt;</a></li>
				</ul>

			</div>
		</div>
		<!-- 度假酒店 -->
		<div class="mian">
			<div class="mian-box">
				<h1 class="mb-h1">度假酒店</h1>

				<div class="list">
					<div class="list-left">
						<div class="sf">
							<img src="../assets/img/2017102517410161201.jpg" alt="" title="">
						</div>
						<div class="left-info">
							<h4 title="昭明书舍">昭明书舍</h4>
							<p>
								酒店装修风格取材于乌镇昭明书院古迹，融入江南古镇文脉，打造文化休闲、书式生活空间。书舍厅堂弥漫古色古香的书卷气息。
							</p>
							<div class="views">
								<span>
									了解更多
								</span>
							</div>
						</div>

					</div>

					<div class="list-right">
						<ul class="listc">
							<li>
								<a href="/web/vacation/details?id=50D43E0DB89B388EA9397071AAF95EA2">
									<div class="sf">
										<img src="../assets/img/2017090814015687223.png" alt="" title="">
									</div>
									<h4 title="枕水度假酒店">枕水度假酒店</h4>
									<div class="views">
										<span>
											了解更多
										</span>
									</div>
								</a>
							</li>
							<li>
								<a href="/web/vacation/details?id=5A4FBE085C9A2A4A0D8667FB5AB11B61">
									<div class="sf">
										<img src="../assets/img/2017102516530896123.jpg" alt="" title="">
									</div>
									<h4 title="水巷驿">水巷驿</h4>
									<div class="views">
										<span>
											了解更多

										</span>
									</div>
								</a>
							</li>
							<li>
								<a href="/web/vacation/details?id=B2A8E1E27F5BDFD675F39B063DB7C871">
									<div class="sf">
										<img src="../assets/img/2018052311260733851.jpg" alt="" title="">
									</div>
									<h4 title="通安客栈">通安客栈</h4>
									<div class="views">
										<span>
											了解更多
										</span>
									</div>
								</a>
							</li>
							<li>
								<a href="/web/vacation/details?id=FE598E34F496B44B3F412055A94BC90D">
									<div class="sf">

										<img src="../assets/img/2018082915263181818.jpg" alt="" title="">
									</div>
									<h4 title="水市客舍">水市客舍</h4>
									<div class="views">
										<span>
											了解更多
										</span>
									</div>
								</a>
							</li>


						</ul>

					</div>

				</div>

			</div>
		</div>
		<!-- 精品酒店 -->

		<div class="mian" style="background-color: #F3F4F8;">

			<div class="mian-box">
				<h1 class="mb-h1">精品酒店</h1>

				<div class="list">

					<div class="list-left">
						<div class="sf">

							<img src="../assets/img/2018033015383154835.jpg" alt="" title="">
						</div>
						<div class="left-info">
							<h4 title="宜园精品酒店">宜园精品酒店</h4>
							<p> 宜园整体建筑群以传统中式庭院民居改造，间间临水，内拥有精致中式传统庭院，宁静私密，更有私家湖泊，夏荷秋竹，鱼翔浅底，赏不尽江南秀色。高贵典雅的休闲环境，尽善尽美的个人化VIP服务，为商贾政要精英提供最佳的交友、宴请与休闲的选择。
							</p>
							<div class="views">
								<span>
									了解更多
								</span>
							</div>
						</div>

					</div>

					<div class="list-right">
						<ul class="listc">
							<li>
								<a href="/web/vacation/details?id=50D43E0DB89B388EA9397071AAF95EA2">
									<div class="sf">

										<img src="../assets/img/2021050614195586389.jpg" alt="" title="">
									</div>
									<h4 title="益大丝业会馆">益大丝业会馆</h4>
									<div class="views">
										<span>
											了解更多
										</span>
									</div>
								</a>
							</li>
							<li style="margin-right: 0px;">
								<a href="/web/vacation/details?id=5A4FBE085C9A2A4A0D8667FB5AB11B61">
									<div class="sf">

										<img src="../assets/img/2017102517302129836.jpg" alt="" title="">
									</div>
									<h4 title="锦堂行馆">锦堂行馆</h4>
									<div class="views">
										<span>
											了解更多

										</span>
									</div>
								</a>
							</li>
							<li>
								<a href="/web/vacation/details?id=B2A8E1E27F5BDFD675F39B063DB7C871">
									<div class="sf">

										<img src="../assets/img/2017102517410161201.jpg" alt="" title="">
									</div>
									<h4 title="望津里精品酒店">望津里精品酒店</h4>
									<div class="views">
										<span>
											了解更多
										</span>
									</div>
								</a>
							</li>
							<li style="margin-right: 0px;">
								<a href="/web/vacation/details?id=FE598E34F496B44B3F412055A94BC90D">
									<div class="sf">

										<img src="../assets/img/2019120613584658807.jpg" alt="" title="">
									</div>
									<h4 title="伊甸园铂金酒店">伊甸园铂金酒店</h4>
									<div class="views">
										<span>
											了解更多
										</span>
									</div>
								</a>
							</li>


						</ul>

					</div>

				</div>

			</div>
		</div>

		<!-- 乌镇民宿 -->
		<div class="wuzheng">
			<div class="wzleft">
				<h2>乌镇民宿</h2>
				<p>乌镇民宿沿西栅市河蜿蜒而布，由乌镇具有百年历史的民居改建而成。客房或面水，或临街，推窗可赏江南水乡秀丽风光，出门可跨入绵延的西栅大街</p>
				<div class="views">
					<a href="http://www.wuzhen.com.cn/web/vacation/details?id=B38D6163B7CAD9D1DB4C6F7D3D7B087C">
						<span>
							了解更多
						</span>
					</a>
				</div>
			</div>

			<div class="wzright">
				<div class="sf">

					<img src="../assets/img/2017102517440063092.jpg">
				</div>
			</div>
		</div>

		<!-- 经济酒店 -->
		<div class="jingji">
			<h1>经济酒店</h1>
			<ul>
				<li>
					<a href="/web/vacation/details?id=3EF26BA8F7DB5ADDDDA5C42CCF9965DF">
						<div class="sf">

							<img src="../assets/img/2020102410170932371.jpg" alt="" title="">
						</div>
						<h4 title="子夜酒店">子夜酒店</h4>
						<div class="views">
							<span>
								了解更多
							</span>
						</div>
					</a>
				</li>
				<li>
					<a href="/web/vacation/details?id=61C91B80264EAF48D668D36A7763CE43">
						<div class="sf">

							<img src="../assets/img/2020102410265617234.jpg" alt="" title="">
						</div>
						<h4 title="两府客栈">两府客栈</h4>
						<div class="views">
							<span>
								了解更多
							</span>
						</div>
					</a>
				</li>
				<li style="margin-right: 0px;">
					<a href="/web/vacation/details?id=A5BC35368C3DD460F9F92370B4FF0F70">
						<div class="sf">

							<img src="../assets/img/2017092815182654880.png" alt="" title="">
						</div>
						<h4 title="林家客栈">林家客栈</h4>
						<div class="views">
							<span>
								了解更多
							</span>
						</div>
					</a>
				</li>
				<li>
					<a href="/web/vacation/details?id=A8900CB6F1C53EDDA8382A9CF4936A37">
						<div class="sf">

							<img src="../assets/img/2018100716115220027.jpg" alt="" title="">
						</div>
						<h4 title="南栅客栈">南栅客栈</h4>
						<div class="views">
							<span>
								了解更多
							</span>
						</div>
					</a>
				</li>

			</ul>
		</div>

		<!-- 青年旅馆 -->
		<div class="qingnian">
			<div class="jingji">
				<h1>青年旅馆</h1>
				<ul>
					<li>
						<a href="/web/vacation/details?id=3EF26BA8F7DB5ADDDDA5C42CCF9965DF">
							<div class="sf">

								<img src="../assets/img/2018112415521712350.jpg" alt="" title="">
							</div>
							<h4 title="乌镇青年驿站">乌镇青年驿站</h4>
							<div class="views">
								<span>
									了解更多
								</span>
							</div>
						</a>
					</li>
					<li>
						<a href="/web/vacation/details?id=61C91B80264EAF48D668D36A7763CE43">
							<div class="sf">
								<img src="../assets/img/2017092815354729823.png" alt="" title="">
							</div>
							<h4 title="水巷青年旅馆">水巷青年旅馆</h4>
							<div class="views">
								<span>
									了解更多
								</span>
							</div>
						</a>
					</li>
				</ul>
			</div>
		</div>

		

	</div>
</template>

<style type="text/css" scoped="scoped">
	.wrap-full {
		width: 100%;
	}

	.sf {
		overflow: hidden;
	}

	.sf img {
		transition: all 1s;
	}

	.sf:hover img {
		transform: scale(1.2);
	}

	.page-top-img {
		width: 1920px;
		height: 100%;
		margin: 0 auto;
	}

	.page-top-img img {
		width: 100%;
	}

	.wrap {
		width: 1400px;
		margin: 0 auto;
	}

	.title-block {
		padding: 7px;
		width: 355px;
		margin-top: -90px;
		z-index: 500;
		position: relative;
		background: rgba(39, 40, 49, 0.75);
	}

	.title-block div {
		border: solid 2px #ffffff;
		line-height: 100px;
		padding-left: 20px;
		font-size: 42px;
		color: #FFFFFF;
		letter-spacing: 0.6px;

	}

	.page-nav {
		display: flex;
		border-bottom: 1px solid #D5DAE1;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.page-nav li a {
		font-size: 14px;
		color: #7E808A;
		margin-right: 10px;
	}

	.page-nav li.active a {
		color: #000000;
	}

	/* 度假酒店 */
	.mian {
		width: 100%;
		padding-bottom: 30px;
	}

	.mian-box {
		width: 1400px;
		margin: 0 auto;
	}

	.mb-h1 {
		font-size: 36px;
		color: #272831;
		letter-spacing: 1.29px;
		line-height: 130px;
		font-weight: 500;
	}

	.list {
		display: flex;
		justify-content: space-between;
	}

	.list-left {
		width: 680px;
	}

	.list-right {
		width: 680px;
	}

	.list-left img {
		width: 100%;
	}

	.left-info h4 {
		font-size: 24px;
		color: #272831;
		letter-spacing: 0.8px;
		line-height: 100px;
		font-weight: 500;
	}

	.left-info p {
		font-size: 14px;
		color: #7E808A;
		letter-spacing: 0.8px;
		line-height: 32px;
		height: 64px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

	}

	.left-info .views span {
		font-size: 14px;
		letter-spacing: 0.8px;
		padding-bottom: 9px;
		border-bottom: solid 2px #272831;
		color: #272831;
	}

	.left-info .views {
		margin-top: 40px;
		display: inline-block;
	}

	.listc {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.listc li {
		width: 320px;
		margin-bottom: 40px;
	}

	.listc li img {
		width: 100%;
	}

	.listc li .views span {
		font-size: 14px;
		letter-spacing: 0.8px;
		padding-bottom: 9px;
		border-bottom: solid 2px #272831;
		color: #272831;
	}

	.listc li h4 {
		font-size: 24px;
		color: #272831;
		letter-spacing: 0.6px;
		padding-top: 20px;
		padding-bottom: 16px;
		line-height: 40px;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: 500;
	}

	.wuzheng {
		display: flex;
		justify-content: space-between;
		width: 1400px;
		margin: 0 auto;
		overflow: hidden;
		border-bottom: solid 1px #D5DAE1;
	}

	.wzleft {
		width: 600px;
		padding-top: 80px;
	}

	.wzleft h2 {
		margin-top: 100px;
		font-size: 36px;
		font-weight: 500;
	}

	.wzleft p {
		margin: 32px 0;
		font-size: 14px;
		color: #7E808A;
		letter-spacing: 0.62px;
		line-height: 32px;
	}

	.wzright img {
		width: 700px;
	}

	.wzright {
		padding: 80px 0;
	}

	.views span {
		font-size: 14px;
		letter-spacing: 0.8px;
		padding-bottom: 9px;
		border-bottom: solid 2px #272831;
		color: #272831;
	}

	.jingji {
		width: 1400px;
		margin: 0 auto;
	}

	.jingji h1 {
		font-size: 36px;
		color: #272831;
		letter-spacing: 1.29px;
		line-height: 130px;
		font-weight: 500;
	}

	.jingji ul {
		display: flex;
		flex-wrap: wrap;

	}

	.jingji ul li {
		width: 400px;
		margin-bottom: 70px;
		margin-right: 100px;
	}

	.jingji ul li:nth-of-type(3n) {
		margin-right: 0;
	}

	.jingji ul li h4 {
		font-size: 24px;
		color: #272831;
		letter-spacing: 0.8px;
		line-height: 76px;
		font-weight: normal;
	}

	.qingnian {
		width: 100%;
		background-color: #F3F4F8;
	}


	body {
		overflow-x: hidden;
	}
</style>

<script>
	export default {
		methods: {
			top() {

			}
		}
	}
</script>